<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title {
            line-height: 40px;
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
    <link rel="stylesheet" href="../rest.css">
</head>

<body>
    <div class="wrap">
        <h3 id="title">DOM操作</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
    <button class="css">css</button>
</body>

<script>
    function GetEle(selector) {
        if (typeof selector == "string") {
            var list = document.querySelectorAll(selector)
        } else if (selector instanceof Element) {
            var list = [selector]
        } else if (typeof selector == "object" && selector.length >= 0) {
            var list = selector
        }
        list = Array.from(list)
        Object.setPrototypeOf(list, GetEle.prototype) // 在修改真数组的原型属性([[Prototype]])
        return list// [ele,ele,ele,ele]  构造函数返回自定义实例化对象
    }
    GetEle.prototype.setHtml = function (con) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        for (var i = 0; i < this.length; i++) {
            var ele = this[i]
            ele.innerHTML = con
        }
    }
    GetEle.prototype.getHtml = function () {
        return this[0].innerHTML
    }
    GetEle.prototype.click = function (callback) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        this.on("click", callback);
    }
    GetEle.prototype.dblclick = function (callback) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        this.on("dblclick", callback);
    }
    GetEle.prototype.mousedown = function (callback) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        this.on("mousedown", callback);
    }
    GetEle.prototype.mousemove = function (callback) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        this.on("mousemove", callback);
    }
    GetEle.prototype.mouseup = function (callback) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        this.on("mouseup", callback);
    }
    GetEle.prototype.each = function (callback) { // 回调函数 => 每次循环时执行
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        for (var i = 0; i < this.length; i++) { // 传入一个回调函数 每次循环时执行
            var item = this[i]; // 循环的当前元素
            var index = i;  // 循环的当前下标
            callback(item, index); //两个实参 
        }
    }
    GetEle.prototype.on = function (type, callback) {
        // for (var i = 0; i < this.length; i++) {
        //     var ele = this[i];
        //     ele.addEventListener(type, callback);
        // }

        this.each(function (ele, i) {
            ele.addEventListener(type, callback);
        })
    }
    GetEle.prototype.css = function (key, val) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        if (arguments.length >= 2) { // 有两个参数就设置
            this.each(ele => ele.style[key] = val)
        } else if (arguments.length == 1) { // 有一个参数
            if (typeof key == "string") {
                // css("width");  有一个参数,且是字符串 => 取值 => 默认返回第一个
                try {
                    return window.getComputedStyle(this[0])[key]
                } catch (err) {
                    return this[0].currentStyle[key]
                }
            } else if (typeof key == "object") {
                // css({background:"red",width:"200px"})  有一个参数,且是对象  => 获取键名和键值 设置
                for (var cssKey in key) {
                    var cssVal = key[cssKey]
                    this.css(cssKey, cssVal)
                }
            }
        } else {
            var err = new Error("Please pass in at least one parameter!")
            throw err
        }
    }
    function $(ele) {
        return new GetEle(ele)
    }

    $(".css").click(function () {
        $(".list").css("overflow", "hidden")
        $(".list li").css({
            width: "100px",
            height: "100px",
            background: "green",
            float: "left",
        })
    })


    $('.list li').on('click', function () {
        $(this).css({ width: '200px', height: '50px', backgroundColor: 'green' })

    })
</script>

</html>